<template>
  <view>
    <!-- 最外层容器 -->
    <view class="my-settle-container">
      <!-- 全选区域 -->
      <label class="radio" @click="changeAllState">
        <radio color="#c00000" :checked="isFullCheck"><text>全选</text></radio>
      </label>
      
      <!-- 合计区域 -->
      <view class="amount-box">
        合计：<text class="amount">￥{{checkedGoodsAmount}}</text>
      </view>
      
      <!-- 结算区域 -->
      <view class="btn-settle" @click="settlement">
        结算({{checkedCount}})
      </view>
    </view>
  </view>
</template>

<script>
  import { mapGetters,mapMutations , mapState} from 'vuex'
  export default {
    name:"my-settle",
    computed: {
      ...mapGetters('m_cart', ['checkedCount', 'total','checkedGoodsAmount']), // 用户勾选商品数量, 商品总数量, 已勾选商品的总价格
      ...mapGetters('m_user',['addstr']), // 收货地址
      ...mapState('m_user', ['token']), // 用户token (登录凭证)
      ...mapState('m_cart', ['cart']),
      isFullCheck () {
        return this.total === this.checkedCount
      }
    },
    data() {
      return {
        seconds: 3, // 秒数
      };
    },
    
    methods: {
      ...mapMutations('m_cart',['updateAllGoodsState']),
      ...mapMutations('m_user',['updateRedirectInfo']),
      changeAllState () {
        this.updateAllGoodsState(!this.isFullCheck)
      },
      
      // 点击结算事件处理函数
      settlement () {
        // 1- 用户至少勾选一间商品
        if (this.checkedCount === 0) return uni.$showMsg('请选择要结算的商品')
        
        // 2- 用户要选择收货地址
        if (!this.addstr) return uni.$showMsg('请选择收货地址')
        
        // 3- 用户要是登录状态
        if (!this.token) return this.delayNavigate()
        
        // 可以结算
        // console.log('可以结算')
        this.payOrder()
      },
      
      // 未登录3秒倒计时弹窗
      delayNavigate () {
        // 倒计时
        for (let i = 0; i <= this.seconds; i++) {
          setTimeout(() => {
            if (i === this.seconds) {
              // 跳转到登录页面
              return uni.switchTab({
                url: '/pages/my/my',
                success: () => {
                  // 将当前页面的跳转信息保存到 vuex 中 { openType: 'switchTab', from: '/pages/cart/cart' }
                  this.updateRedirectInfo({openType: 'switchTab', from: '/pages/cart/cart'})
                }
              })
            } 
            
            console.log(this.seconds - i)
            uni.showToast({
              title: `您未登录,将在${this.seconds - i}秒后跳转到登录页面`,
              duration: 1000,
              icon: 'none'
            })
          },i * 1000)
        }
      },
      
      // 结算
      async payOrder () {
        // 1- 创建订单
        // 1.1 准备创建订单参数
        const orderInfo = {
            // 开发期间，注释掉真实的订单价格，
            // order_price: this.checkedGoodsAmount,
            // 写死订单总价为 1 分钱
            order_price: 0.01,
            consignee_addr: this.addstr,
            goods: this.cart.filter(x => x.goods_state)
                            .map(x => ({
                                goods_id: x.goods_id,
                                goods_number: x.goods_count,
                                goods_price: x.goods_price
                            	})
                            )
          }
            // 1.2 发起请求创建订单
            const { data: res } = await uni.$http.post('/my/orders/create', orderInfo)
            
            if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
              
            // 1.3 得到服务器响应的“订单编号”
            const orderNumber = res.message.order_number
              // 2. 订单预支付
              // 2.1 发起请求获取订单的支付信息
              const { data: res2 } = await uni.$http.post('/my/orders/req_unifiedorder', { order_number: orderNumber })
              
              // 2.2 预付订单生成失败
              if (res2.meta.status !== 200) return uni.$showMsg('预付订单生成失败！')
                
              // 2.3 得到订单支付相关的必要参数
              const payInfo = res2.message.pay
              
              // 3. 发起微信支付
                 // 3.1 调用 uni.requestPayment() 发起微信支付
                 const [err, succ] = await uni.requestPayment(payInfo)
                 
                 // 3.2 未完成支付
                 if (err) return uni.$showMsg('订单未支付！')
                  
                 // 3.3 完成了支付，进一步查询支付的结果
                 const { data: res3 } = await uni.$http.post('/my/orders/chkOrder', { order_number: orderNumber })
                 
                 // 3.4 检测到订单未支付
                 if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
                  
                 // 3.5 检测到订单支付完成
                 uni.showToast({
                   title: '支付完成！',
                   icon: 'success'
                 })
      }
    }
  }
</script>

<style lang="scss">
  .my-settle-container {
    // 底部固定定位
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    background-color: white;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10rpx;
    font-size: 24rpx;
    .radio {
      display: flex;
      align-items: center;
    }
    .amount-box {
      .amount {
        color: #c00000;
      }
    }
    .btn-settle {
      height: 100rpx;
      min-width: 200rpx;
      background-color: #c00000;
      color: white;
      line-height: 100rpx;
      text-align: center;
      padding: 0 20rpx;
    }
  }
</style>
